<template>
  <div class="settings">
    <el-card>
      <template v-slot:header>
        <h2>个人设置</h2>
      </template>
      <el-row>
        <el-col :span="12">
          <el-form label-width="120px" :model="userInfo">
            <el-form-item label="编号：">100</el-form-item>
            <el-form-item label="手机：">{{ userInfo.mobile }}</el-form-item>
            <el-form-item label="媒体名称：">
              <el-input v-model="userInfo.name"></el-input>
            </el-form-item>
            <el-form-item label="媒体简介：">
              <el-input
                v-model="userInfo.intro"
                type="textarea"
                :rows="3"
              ></el-input>
            </el-form-item>
            <el-form-item label="联系邮箱：">
              <el-input v-model="userInfo.email"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="save">保存设置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col :span="12">
          <el-upload
            class="avatar-uploader"
            action="12"
            :http-request="httpRequest"
          >
            <img v-if="userInfo.photo" :src="userInfo.photo" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
import { getUserInfo, updataUserInfo, updatePhoto } from '@/api'
export default {
  data () {
    return {
      userInfo: {
        id: '',
        mobile: '',
        name: '',
        intro: '',
        email: ''
      }
    }
  },
  async created () {
    let res = await getUserInfo()
    console.log(res.data);
    this.userInfo = res.data.data
  },
  methods: {
    //上传用户 资料
    async save () {
      let res = await updataUserInfo(this.userInfo)
      // console.log(res);
      console.log('编辑资料', res.data.data);
      this.$message.success('编辑成功')

      this.$bus.$emit('name', res.data.data.name)
    },
    //上传用户图片
    async httpRequest (config) {
      console.log('图片：', config.file);

      //1.创建一个空的formdata实例
      let formdata = new FormData()
      //2.拼接内容
      formdata.append('photo', config.file)
      //3.上传图片
      let res = await updatePhoto(formdata)
      console.log('上传图片', res);
      //4.赋值
      this.userInfo.photo = res.data.data.photo
      //5.发布
      this.$bus.$emit('photo', res.data.data.photo)
    }
  }
}
</script>

<style scoped lang="less">
/deep/ .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
/deep/ .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}

.el-form {
  width: 50%;
  float: left;
}
.avatar-box {
  float: right;
  width: 50%;
  text-align: center;
}
</style>

